<template>
	<view class="request" :style="{marginTop:systemBarHeight+'px'}">
		<view class="header">
			<image src="../../static/images/commom/back.png" class="btn back" @tap = "back"></image>
			<view class="text">
				好友请求
			</view>
		</view>
		<view class="container" :style="{top:(systemBarHeight+60)+'px'}">
			<view class="requestinfo" v-for="(item) in requestlist">
				<image :src="item.imgurl" class="userimg"></image>
				<view class="top">
					<view class="btn left" @tap = "disagree(item.id)">
						拒绝
					</view>
					<view class="btn right" @tap = "agree(item.id)">
						同意
					</view>
				</view>
				<view class="mid">
					<view class="name">
						{{item.name}}
					</view>
					<view class="time">
						{{item.lasttime}}
					</view>
				</view>
				<view class="bot">
					留言: {{item.message}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myfunc from "../../commoms/js/myfunction.js"
	export default {
		data() {
			return {
				uid:'',
				user:{},
				requestlist:[]
			};
		},
		onLoad(e){
			this.uid = e.id;
			this.gettoken();
			this.showuserlist();
			this.getSysteminfo();
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			disagree(id){//拒绝
				uni.request({
					url:this.serverurl+"friend/deletefriend",
					data:{				
						uid:this.uid,
						fid:id,
						token:this.user.token
					},
					method:'POST',
					success:(result)=>{
						let info = result.data;
						if(info.status == 200){
							this.showuserlist();
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			agree(id){//同意
				uni.request({
					url:this.serverurl+"friend/updatefriendstate",
					data:{				
						uid:this.uid,
						fid:id,
						token:this.user.token
					},
					method:'POST',
					success:(result)=>{
						let info = result.data;
						if(info.status == 200){
							this.showuserlist();
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			gettoken(){
				try {
				    const value = uni.getStorageSync('wikiuser');
				    if (value) {
				       this.user = (JSON.parse(value))
				    }
				} catch (e) {
				    console.log(e)
				}
			},
			showuserlist(){//获取好友列表
				uni.request({
					url:this.serverurl+"index/getusers",
					data:{
						uid:this.uid,
						state:1,
						token:this.user.token
					},
					method:'POST',
					success:(result)=>{					
						let info = result.data;
						if(info.status == 200){
							this.requestlist = info.data;
							for(var i = 0;i<this.requestlist.length;i++){
								let obj = this.requestlist[i];
								obj.imgurl = this.serverurl+`userimage/${obj.imgurl}`;
								obj.lasttime = myfunc.gettime(obj.lasttime)
							}
							console.log(this.requestlist)
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})	
			},
		}
	}
</script>

<style lang="scss">
.request{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.header{
		position: absolute;
		height: 120rpx;
		width: 100%;
		padding: 0 42rpx;		
		box-sizing: border-box;
		border-bottom: 1px solid rgba(187, 187, 187, 100);;
		.btn{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 48rpx;
			height: 48rpx;		
		}
		.text{
			flex: 1;
			text-align: center;
			line-height: 120rpx;
			color: rgba(16, 16, 16, 100);
			font-size: 48rpx;
			// font-weight: bold;
		}
	}
	.container{
		position: fixed;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		padding: 38rpx 44rpx;
		box-sizing: border-box;
		.requestinfo{
			position: relative;
			margin-top: 118rpx;
			padding: 40rpx 48rpx;
			box-sizing: border-box;
			width: 662rpx;
			height: 328rpx;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(74, 71, 71, 100);
			border-radius: 22rpx;
			.userimg{
				position: absolute;
				left: 50%;
				top: -50%;
				transform: translate3d(-50%,50%,0);
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(52, 199, 88, 100);
			}
			.top{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.btn{
					width: 140rpx;
					height: 50rpx;
					border-radius: 8px;					
					text-align: center;
					border: 1px solid rgba(187, 187, 187, 100);
					font-size: 24rpx;
					line-height:50rpx;
					&.left{
						background-color: rgba(255, 204, 199, 100);
						color: rgba(255, 23, 68, 100);
					}
					&.right{
						background-color: rgba(250, 219, 20, 100);
						color: rgba(64, 64, 64, 100);
					}
				}
				
			}
			.mid{
				margin-top: 10rpx;
				.name{
					color: rgba(74, 71, 71, 100);
					font-size: 32rpx;
					text-align: center;
					font-weight: bold;
				}
				.time{
					color: rgba(158, 158, 158, 100);
					font-size: 24rpx;
					text-align: center;
				}
			}
			.bot{
				margin-top: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;
				height: 108rpx;
				border-radius: 20rpx;
				background-color: rgba(245, 245, 245, 100);
				text-align: center;
				border: 2rpx solid rgba(187, 187, 187, 100);
				font-size: 24rpx;
			}
		}
	}
}
</style>
